<template>
    <div class="app-container">
        <div class="order_stat">
            <div class="title">
                <div>订单概况
                    <span style="font-size: 14px;color: #e0e0e0;font-weight: 300;margin-left: 10px;">
                        更新时间：2024-12-21 11:19:05</span>
                </div>
                <div class="com-export-dialog">
                    <el-date-picker v-model="orderOverviewTime" type="date" placeholder="选择日期" @change="orderOverview">
                    </el-date-picker>
                </div>
            </div>
            <div class="stat_details">
                <div class="order_module" v-for="item in order_module" :key="item.id">
                    <div class="oirder_modul_title">
                        <div>{{ item.name }}</div>
                        <el-tooltip class="item" effect="dark" :content="item.toolip" placement="bottom"
                            v-if="item.toolip">
                            <i class="el-icon-question" style="color: #afadad;margin-left: 3px;font-size: 17px;"></i>
                        </el-tooltip>
                    </div>
                    <div class="price">
                        {{ item.num }}
                    </div>
                </div>
            </div>
        </div>
        <div class="total">
            <div class="pay_total">
                <div class="title">
                    <div style="flex: 1 1 0%;">支付统计</div>
                </div>
                <div class="pay_modules">
                    <div class="module">
                        <div class="order_module">
                            <div class="oirder_modul_title" style="margin-bottom: 17px;">第三方支付</div>
                            <div class="price">{{ orderOverviewData.thirdPartyPayment.toFixed(2) || 0 }}</div>
                        </div>
                    </div>
                    <div class="module">
                        <div class="order_module">
                            <div class="oirder_modul_title" style="margin-bottom: 17px;">余额支付</div>
                            <div class="price">{{ orderOverviewData.balancePayment.toFixed(2) || 0 }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pay_total">
                <div class="title">
                    <div style="flex: 1 1 0%;">会员账户资产</div>
                    <div class="pay_button"></div>
                </div>
                <div class="pay_modules">
                    <div class="module_two" style="background: rgb(255, 255, 255);">
                        <img src="../../../assets/img/income.png" class="pay_img">
                        <div class="assets">
                            <div>待提现佣金（元）</div>
                            <div style="color: rgb(0, 0, 0); margin-top: 5px;">{{ queryMemberdata.unusedBrokerage || 0
                                }}
                            </div>
                        </div>
                    </div>
                    <div class="module_two" style="background: rgb(255, 255, 255);">
                        <img src="../../../assets/img/balance.png" class="pay_img">
                        <div class="assets">
                            <div>未使用余额（元）</div>
                            <div style="color: rgb(0, 0, 0); margin-top: 5px;">{{ queryMemberdata.unusedBalance || 0 }}
                            </div>
                        </div>
                    </div>
                    <div class="module_two" style="background: rgb(255, 255, 255);">
                        <img src="../../../assets/img/integral.png" class="pay_img">
                        <div class="assets">
                            <div>未使用积分</div>
                            <div style="color: rgb(0, 0, 0); margin-top: 5px;">{{ queryMemberdata.unusedIntegral || 0 }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
            <el-tabs v-model="activeName" @tab-click="incomeAndExpenditureTrend">
                <el-tab-pane label="近七天" name="1"></el-tab-pane>
                <el-tab-pane label="一个月" name="2"></el-tab-pane>
            </el-tabs>
            <line-chart :chartData="lineChartData" height="400px" />
        </el-row>

        <!-- 添加或修改供应商商品对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="分类名称" prop="deptName">
                    <el-input v-model="form.deptName" placeholder="请输入分类名称" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="form.sort" placeholder="请输入排序" />
                </el-form-item>
                <el-form-item label="分类图标" prop="classifyImg">
                    <image-upload @input="uploadImg" :value="form.classifyImg" :limit="1" />
                </el-form-item>
                <el-form-item label="是否启用" prop="status">
                    <el-switch v-model="form.status">
                    </el-switch>
                </el-form-item>
                <el-form-item label="是否显示" prop="goodId">
                    <el-switch v-model="form.delFlag">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { goodClassifyList, goodClassifyDetail, goodclassifyAdd, goodclassifyEdit, goodclassifyDelete } from "@/api/system/goods/classify";
import { queryOrderProfileAndPaymentStatistics, queryRevenueAndExpenditureTrend, queryMemberAccountAssets } from "@/api/assets/overview";
import LineChart from './components/LineChart.vue'
const lineChartData = {
    newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    messages: {
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    purchases: {
        expectedData: [80, 100, 121, 104, 105, 90, 100],
        actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    shoppings: {
        expectedData: [130, 140, 141, 142, 145, 150, 160],
        actualData: [120, 82, 91, 154, 162, 140, 130]
    }
}
export default {
    name: "Good",
    components: {
        LineChart,
    },
    data() {
        return {
            lineChartData: null,
            order_module: [
                { name: '下单总金额', num: 0, toolip: '平台订单产生的总金额包含待付款和已付款' },
                { name: '下单待付款', num: 0, toolip: '平台产生的待支付或已失效订单金额' },
                { name: '下单已付款', num: 0, toolip: '订单已支付的实际金额' },
                { name: '退款金额', num: 0, toolip: '平台产生的订单退款金额' },
            ],
            value1: '',
            checkboxList: '',
            activeName: 'first',
            // 日期范围
            dateRange: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 供应商商品表格数据
            goodList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                deptName: null,
                sort: null,
                classifyImg: null,
                status: null,
                delFlag: null,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                productLevel: [
                    { required: true, message: "商品等级 1vip 3共享店主 4联创 5区域运营 6总裁不能为空", trigger: "blur" }
                ],
            },
            orderOverviewTime: new Date(),
            orderOverviewData: {},
            activeName: '1',
            queryMemberdata: {},
        };
    },
    created() {
        this.getList();
        this.orderOverview()
        this.incomeAndExpenditureTrend()
        this.memberAccount()
    },
    methods: {
        /**查询 收支趋势 type 1 近七天  2 近一个月 */
        incomeAndExpenditureTrend() {
            let params = {
                type: this.activeName
            }
            queryRevenueAndExpenditureTrend(params).then(res => {
                this.lineChartData = res.data
            })
        },
        /**查询 订单概况 支付统计 */
        orderOverview() {
            let params = {
                date: this.$dayjs(this.orderOverviewTime).format('YYYY-MM')
            }
            queryOrderProfileAndPaymentStatistics(params).then(res => {
                this.orderOverviewData = res.data
                this.order_module.forEach(item => {
                    switch (item.name) {
                        case '下单总金额':
                            item.num = res.data.orderAmountMoney.toFixed(2)
                            break;
                        case '下单待付款':
                            item.num = res.data.orderObligationMoney.toFixed(2)
                            break;
                        case '下单已付款':
                            item.num = res.data.orderAccountPaidMoney.toFixed(2)
                            break;
                        case '退款金额':
                            item.num = res.data.orderRefundMoney.toFixed(2)
                            break;
                    }
                })
            })
        },
        /**查询会员账户资产 */
        memberAccount() {
            queryMemberAccountAssets().then(res => {
                this.queryMemberdata = res.data
            })
        },
        /** 查询供应商商品列表 */
        getList() {
            this.loading = true;
            // this.addDateRange(this.queryParams, this.dateRange)
            goodClassifyList(this.queryParams).then(response => {
                this.goodList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                deptName: null,
                sort: null,
                classifyImg: null,
                status: null,
                delFlag: null,
            };
            this.dateRange = [];
            this.resetForm("form");
        },
        uploadImg(v) {
            this.form.classifyImg = v
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加商品分类";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id || this.ids
            goodClassifyDetail(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改商品分类";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.status = this.form.status ? '0' : '1'
                    this.form.delFlag = this.form.delFlag ? '0' : '1'
                    if (this.form.id != null) {
                        goodclassifyEdit(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        goodclassifyAdd(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$modal.confirm('是否确认删除数据？').then(function () {
                return goodclassifyDelete(ids);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('system/good/export', {
                ...this.queryParams
            }, `good_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style lang="less" scoped>
.app-container {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;


    .order_stat {
        background: #FFF;
        padding: 10px 10px 0;
        margin-bottom: 10px;

        .title {
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: center;
            height: 40px;
            display: flex;
            justify-content: space-between;
        }

        .stat_details {
            padding: 30px 0;
            display: flex;

            .order_module {
                flex: 1;
                background: #F2F2F2;
                margin: 0 5px;
                padding: 20px 25px;

                .oirder_modul_title {
                    font-size: 12px;
                    margin-bottom: 10px;
                    display: flex;
                    align-items: center;
                    color: #46a6ff;
                }

                .price {
                    font-size: 22px;
                    font-weight: bold;
                }
            }
        }

    }

    .total {
        display: flex;
        margin-bottom: 10px;

        .pay_total {
            flex: 1;
            flex-basis: 764px;
            background: #FFF;
            padding: 10px 10px 15px;

            .title {
                font-size: 18px;
                font-weight: bold;
                display: flex;
                align-items: center;
                height: 40px;
            }

            .pay_modules {
                margin-top: 20px;
                display: flex;
                flex-wrap: wrap;

                .module {
                    width: 47%;
                    padding: 15px 20px;
                    margin-bottom: 15px;
                    display: flex;

                    .order_module {
                        flex: 1;
                        margin: 0 5px;
                        padding: 15px 20px;
                        background: #F7F7F7;


                        .oirder_modul_title {
                            font-size: 12px;
                            margin-bottom: 10px;
                            display: flex;
                            align-items: center;
                        }

                        .price {
                            font-size: 22px;
                            font-weight: bold;
                        }
                    }
                }

                .module_two {
                    width: 33%;
                    background: #F7F7F7;
                    padding: 20px 25px;
                    margin-bottom: 15px;
                    display: flex;

                    .pay_img {
                        width: 56px;
                        height: 56px;
                        margin-right: 20px;
                    }

                    .assets {
                        color: #848484;
                    }
                }
            }
        }
    }
}

::v-deep .el-tabs__nav-wrap::after {
    display: none;
}

::v-deep .el-tabs {
    position: absolute;
    right: 0;
    width: 10%;

    ::v-deep.el-tabs__header {
        margin: 0;
    }
}
</style>